<template>
  <div class="index">
    <router-view/>
    <Tabbar :tabOptions="tabOptions" @onChange="onChange"></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../components/tabbar/index.vue'
export default {
  name: 'Index',
  components: {
    Tabbar
  },
  data() {
    return {
        tabOptions: {
            barColor: {
                activeColor: '#ee0a24', // 选中颜色
                inactiveColor: '#000' // 未选中颜色
            },
            isRoute: false,
            attrs: [
                {
                    prop: 'home',
                    name: '自定义1',
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                    // badge: 5
                    // router: '/home'
                },
                {
                    prop: 'collection',
                    name: '自定义2',
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                    badge: 0
                },
                {
                    prop: 'mine',
                    name: '自定义3',
                    active: 'https://img01.yzcdn.cn/vant/user-active.png',
                    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
                    badge: 1
                }
            ]
        }
    }
  },
  methods: {
    onChange(active) {
        console.log(active)
    }
  }
}
</script>
